<!--
 * @Description: 
 * @Author: jack-wang
 * @Date: 2021-03-29 13:25:37
 * @LastEditTime: 2021-03-29 14:35:27
 * @LastEditors: Su Yunzheng
-->
<template>
    <div>
        <h6>手机号登录{{momey | capitalize}}</h6>
        <input type="text" v-model="phone">
        <button :class="['getCode',{'active':!isDisabled}]" @click="getCode" :disabled="isDisabled">获取验证码</button>
        <SmsCode :visible="visible" @login="login"></SmsCode>
    </div>
</template>

<script>
import SmsCode from './components/smsCode';
import {mapActions} from 'vuex';
export default {
    data(){
        return {
            phone:'',
            isDisabled:true,
            visible:false,
            checkCode:'',
            momey:10
        }
    },
    created(){
        console.log(this.$route)
    },
    filters: {
        capitalize: function (value) {
            return '$'+value
        }
    },
    mounted() {
        // this.$alert('121221',1)
       
    },
    components:{
        SmsCode
    },
    watch:{
        phone(newVal){
            this.isDisabled = !/\d{11}$/.test(newVal)
        }
    },
    methods: {
        ...mapActions('user',['loginAction']),
        getCode(){
            if(!this.isDisabled){
                //1.获取验证码  2.打开弹窗
                this.$http.getCode(this.phone).then(res => {
                    console.log(res.data.data.checkcode)
                    if(res.data.code === 1){
                        this.checkCode = res.data.data.checkcode+'';
                        this.visible = true;
                    }
                })
            }
        },
        async login(checkcode){
            let result = await this.loginAction({phone:this.phone,checkcode});
            //1.把弹窗关掉  2.存储token  3.跳转页面
            if(result.data.code === 1){
                this.$alert('用户登录成功');
                this.visible = false;
                let path = this.$route.query.prev ? this.$route.query.prev : '/main';
                this.$router.replace(path);
            }else{
                this.$alert('用户登录失败');
            }
        }
    },
}
</script>

<style lang="scss">
    .getCode{
        background: gray;
        &.active{
            background: orange;
        }
    }
</style>